{{ 'section-main-product.css' | asset_url | stylesheet_tag }}
<div class="video-banner video-banner-launch">
  <div class="header-text">
    <div class="page-width">
      {%- if section.settings.title != blank -%}
        <div class="html">{{ section.settings.title }}</div>
      {%- endif -%}
      {%- if section.settings.text != blank -%}
        <div class="text">{{ section.settings.text }}</div>
      {%- endif -%}
      {%- if section.settings.richtext != blank -%}
        <div class="richtext">{{ section.settings.richtext }}</div>
      {%- endif -%}
      {% if section.settings.price_us != blank or  section.settings.price_other != blank %}
          {%- form 'localization', id: 'FooterCountryForm' -%} 
          {% 
            if 
            localization.country.name contains 'Finland' or
            localization.country.name contains 'Denmark' or
            localization.country.name contains 'Switzerland' or
            localization.country.name contains 'Sweden' or
            localization.country.name contains 'Norway' or
            localization.country.name contains 'United Kingdom'
          %}
          {% elsif localization.country.name contains 'United States'  %}
            {% if section.settings.price_us != blank %}
            <div class="text-price">{{ section.settings.price_us }}</div>
            {% endif %}
          {% else %}
            {% if section.settings.price_other != blank %}
              <div class="text-price">{{ section.settings.price_other }}</div>
            {% endif %}
          {% endif %}
          {%- endform -%}
      {% endif %}
    </div>
  </div>
  <div class="banner-launch-wrapper">
    <div class="pc_banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
    >
    {%- if section.settings.image != blank -%}
      <img
          srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
          {%- if section.settings.image.width >= 323 -%}{{ section.settings.image | img_url: '323x' }} 323w,{%- endif -%}
          {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
          {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
          {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
          {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
          {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
          {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
          data-src="{{ section.settings.image | img_url: '1500x' }}"
          sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
          alt="{{ section.settings.image.alt | escape }}"
          loading="lazy"
          class="lazyload"
          width="{{ section.settings.image.width }}"
          height="{{ section.settings.image.height }}"
      >
    {%- else -%}
      {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
    {%- endif -%}
    </div>
    <div class="image_mobile image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
    >
    {%- if section.settings.image_mobile != blank -%}
      <img
      srcset="{%- if section.settings.image_mobile.width >= 375 -%}{{ section.settings.image_mobile | img_url: '375x' }} 375w,{%- endif -%}
      {%- if section.settings.image_mobile.width >= 412 -%}{{ section.settings.image_mobile | img_url: '412x' }} 412w,{%- endif -%}
      {%- if section.settings.image_mobile.width >= 750 -%}{{ section.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
      {%- if section.settings.image_mobile.width >= 1100 -%}{{ section.settings.image_mobile | img_url: '1100x' }} 1100w,{%- endif -%}
      {%- if section.settings.image_mobile.width >= 1500 -%}{{ section.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
      {%- if section.settings.image_mobile.width >= 1780 -%}{{ section.settings.image_mobile | img_url: '1780x' }} 1780w,{%- endif -%}
      {%- if section.settings.image_mobile.width >= 1903 -%}{{ section.settings.image_mobile | img_url: '1903x' }} 1903w,{%- endif -%}
      {{ section.settings.image_mobile | img_url: 'master' }} {{ section.settings.image_mobile.width }}w"
      sizes="{% if section.settings.image_2 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}"
      src="{{ section.settings.image_mobile | img_url: '1500x' }}"
      loading="lazy"
      alt="{{ section.settings.image_mobile.alt | escape }}"
      width="{{ section.settings.image_mobile.width }}"
      height="{{ section.settings.image_mobile.width | divided_by: section.settings.image_mobile.aspect_ratio }}"
      >
    {%- else -%}
      {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
    {%- endif -%}
    </div>
  </div>

  <div class="buttom-launch" id="launch-text-wrapper">
    <modal-opener class="twy-button product-popup-modal__opener no-js-hidden" data-modal="#PopupModal-{{ section.id }}" >
      <div class="bottom-start_time">
          {%- form 'localization', id: 'FooterCountryForm' -%}
            {% if localization.country.currency.symbol contains '$' and localization.country.currency.symbol != blank %}
              {% else %}
               {{ section.settings.start_time }}                 
            {% endif %}
          {%- endform -%}
      </div>
      <div class="banner__button">
        <button id="ProductPopup-{{ section.id }}" class="product-popup-modal__button link" type="button" aria-haspopup="dialog">
          {{ section.settings.subscribe }}
        </button>
      </div>
    </modal-opener>
  </div>
  <modal-dialog-form id="PopupModal-{{ section.id }}" class="product-popup-modal product-popup-modal-agox-launch">
  <div role="dialog" aria-label="{{ section.settings.button_label_1 }}" aria-modal="true" class="product-popup-modal__content" >
    <button id="ModalClose-{{ section.id }}" type="button" class="product-popup-modal__toggle" aria-label="{{ 'accessibility.close' | t }}">{% render 'pop-close' %}</button>
    <div class="con_popup">
          {%- form 'localization', id: 'FooterCountryForm' -%}
            {% if localization.country.name contains 'United States' %}
                <div class="klaviyo-form-VQwte2"></div>
              {% else %}
                <div class="klaviyo-form-Tnk7Pp"></div>                 
            {% endif %}
          {%- endform -%}
    </div>
  </div>
</modal-dialog-form>
</div>

<script>
    
var browser={
  versions:function(){
    var u = navigator.userAgent, 
      app = navigator.appVersion;
    return {
      trident: u.indexOf('Trident') > -1, //IE内核
      presto: u.indexOf('Presto') > -1, //opera内核
      webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
      gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
      mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
      ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
      android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
      iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
      iPad: u.indexOf('iPad') > -1, //是否iPad
      webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
      weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
      qq: u.match(/\sQQ/i) == " qq" //是否QQ
    };
  }(),
  language:(navigator.browserLanguage || navigator.language).toLowerCase()
}

function render () {
  const height = $(window).height();
  if (browser.versions.mobile && browser.versions.android && height > 660) {
    $("#launch-text-wrapper").css({
      bottom: '18%'
    })
  }
}

render();
</script>

{% schema %}
  {
    "name": "Video banner launch",
    "tag": "section",
    "class": "spaced-section spaced-section--full-width video-image video-banner-launch",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      },
      {
        "type": "image_picker",
        "id": "image_mobile",
        "label": "Image Mobile"
      },
      {
        "type": "richtext",
        "id": "title",
        "label": "title"
      }, {
        "type": "text",
        "id": "text",
        "label": "Column"
      },
      {
        "type": "richtext",
        "id": "richtext",
        "label": "Richtext"
      },
      {
        "type": "text",
        "id": "price_finland",
        "label": "Price Finland"
      },
      {
        "type": "text",
        "id": "price_denmark",
        "label": "Price Denmark"
      },
      {
        "type": "text",
        "id": "price_sweden",
        "label": "Price Sweden"
      },
      {
        "type": "text",
        "id": "price_swland",
        "label": "Price Switzerland"
      },
      {
        "type": "text",
        "id": "price_norway",
        "label": "Price Norway"
      },
      {
        "type": "text",
        "id": "price_us",
        "label": "Price US"
      },
      {
        "type": "text",
        "id": "price_other",
        "label": "Price Other"
      },
      {
      "type": "html",
      "id": "start_time",
      "default": "April 20, 2023 9:00 AM (CET)",
      "label": "Start Time"
      },
      {
        "type": "html",
        "id": "subscribe",
        "default": "Subscribe for updates",
        "label": "Subscribe Button"
      }
    ],
    "blocks": [
      {
        "type": "column",
        "name": "t:sections.multicolumn.blocks.column.name",
        "settings": [
          {
            "type": "html",
            "id": "html",
            "label": "html"
          }, 
          {
            "type": "text",
            "id": "text",
            "label": "Column"
          },
          {
            "type": "text",
            "id": "text_us",
            "label": "Text US"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Video banner launch"
      }
    ]
  }
{% endschema %}













